import React from "react";

import { storiesOf } from "@storybook/react";
import { text, select } from "@storybook/addon-knobs";
// import { withSmartKnobs } from 'storybook-addon-smart-knobs'

import Input from "./index";
import "./index.css";

const variants = {
  default: 'default',
  large: "large",
  small: "small",
};

storiesOf("Input", module)
  .add("Input", () => (
    <div className='flex flex-grow-0 items-baseline'>
      <label htmlFor="username" className='flex-shrink-0'>用户名:</label>
      <Input
        // className="w-16"
        id="username"
        size={select("Size", variants, "default")}
        placeholder={text("Placeholder", "请输入")}
        title={text("Title", "I am a Input")}
      />
    </div>
  ));
